{% extends 'enterprise/base.html' %}
{% block css %}
    <link rel="stylesheet" type="text/css" href="/static/images/skin/minimal/blue.css">
    <link rel="stylesheet" type="text/css" href="http://61.155.4.230:8807/arcgis_js_api/library/3.1/jsapicompact/js/dojo/dijit/themes/claro/claro.css">
    <style type="text/css">
    .mapEdit{
        top: 25px;
        right: 40px;
    }
    .table-bordered > tbody > tr > td{
        font-size: 10px;
    }
    </style>
{% endblock %}
{% block content %}
<script type="text/javascript">
    var primary_menu = "menu_2";
    var sub_menu = "menu_2_{{ menuIndex }}";
</script>
    <div class="col-md-12">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <div class="panel-title"><h3>{{ title }}</h3></div>
                    <div class="panel-options">
                        <a href="{{ listURL }}"  class="bg"><button type="button" class="btn btn-white">列表显示</button></a>
                        <a href="{{ addURL }}"  class="bg"><button type="button" class="btn btn-white"><i class="entypo-plus"></i>&nbsp;新增</button></a>
                        <a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>
                    </div>
                </div>
                <div class="panel-body">
                    <div data-dojo-type="dijit.layout.BorderContainer" design="headline" gutters="false" style="position:relative;width:100%; height:700px;">
                        <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="overflow:hidden; height:700px;">
                            <div id="osmCopy" style="position:absolute; color:black;font-weight:bold;right:10px; bottom:10px; z-Index:999;"></div>
                        </div>
                    </div>
                    <div class="mapEdit">
                        <div class="panel panel-primary panel-collapse">
                            <div class="panel-heading">
                                <div class="panel-title">
                                    <h4 class="heading">编辑{{ title }}</h4>
                                </div>
                            </div>
                            <!-- panel body -->
                            <div class="panel-body">
                                <div class="">
                                    <span>点击</span>
                                    <label class="btn btn-white"><img width="12px" height="12px" src="/static/images/boundary.png"></label>
                                    <span>圈定{{ title }}范围</span><br/>
                                    <span>双击鼠标结束绘制</span>
                                </div>
                                <hr/>
                                <div id="toolbar" style="padding-left: 0px;padding-top:10px;padding-right: 0px;">
                                    <div class="btn-group toolbar" >
                                        <input type="hidden" value="{{ key }}" id="name" />
                                        <input type="hidden" value="" name="valuePolygon" id="valuePolygon" />
                                        <input type="hidden" value="" name="center" id="center" />
                                        <input type="hidden" value="" name="ids" id="ids" />

                                        <label id="rangeStoreCell" class="btn btn-white">
                                            <img title="圈定{{ title }}范围" src="/static/images/boundary.png">
                                        </label>
                                        <label id="undo" class="btn btn-white" onclick="undoManager.undo()">
                                            <img src="/static/images/undo.png">
                                        </label>
                                        <label id="redo" class="btn btn-white" onclick="undoManager.redo();">
                                            <img src="/static/images/redo.png">
                                        </label>
                                    </div>
                                </div>
                                <div id="optionAreaDiv" class="">
                                    <hr>
                                    <!--查找数据 storage-->
                                    <div class="md">
                                        <input class="btn btn-info btn-block" type="button" value="提交"  onClick="submitRange();"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
              </div>
         </div>

    <div class="" id="functionView" style="display: none">
        <div id="storeCellCommitDiv">
            <table class="table table-bordered table-responsive">
                <thead>
                <tr>
                    <th></th>
{#                    <th><input type="checkbox" onclick="checkAll(this)" /></th>#}
                    <th>{{ title }}编号</th>
                    <th>{{ title }}名称</th>

                    {% if key == 'storage' %}
                        <th>{{ title }}生产编号</th>
                    {% elif key == 'production' %}
                        <th>{{ title }}储罐形式</th>
                    {% endif %}
                </tr>
                </thead>
                <tbody class='dataList'>

                </tbody>
            </table>
            <div style="" class="pageStyle" curPage = '1' maxPage = '{{ maxPage }}' >
                <a data='1' href="javascript:;" onClick='pageClick(this,"page");'  class="noline">首页</a>
                <a data='-1' href="javascript:;" onClick='pageClick(this,"change");'  class="noline">上一页</a>
                
                {% for page in pagelist %}
                    <a data='{{ page }}' href="javascript:;" onClick='pageClick(this,"page");' class="pageNum">{{ page }}</a>
                {% endfor %}
                
                <a data='1' href="javascript:;" onClick='pageClick(this,"change");'class="noline">下一页</a>
                <a data='{{ maxPage }}' href="javascript:;" onClick='pageClick(this,"page");' class="noline">尾页</a>
            </div>
        </div>
        <span>点击提交按钮将选中存储单元添加到所圈定区域</span>
        <div class="" id='mapPopHideArea' style="display: none">
            <table class="table table-bordered">
                <thead>
                    <tr id='_headTr'>
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div>
    </div>
{% endblock %}
{% block modal %}
{% endblock %}
{% block js %}
    <script>
        var geo_points = '{{ geo_points }}';
        var geo_center_point = '{{ geo_center_point }}';
        var geo_extent = '{{ geo_extent | safe }}';
        var key = '{{ key }}';

        if(geo_points) geo_points = eval(geo_points);
        if(geo_center_point) geo_center_point = eval(geo_center_point);
        if(geo_extent) geo_extent = JSON.parse(geo_extent);

    </script>
    <script type="text/javascript" src="/static/js/icheck.js"></script>
    <script type="text/javascript" src="/static/js/toastr.js"></script>
    <script type="text/javascript" src="http://61.155.4.230:8807/arcgis_js_api/library/3.1/jsapi/init.js"></script>
    <script type="text/javascript" src="/static/js/showMap.js"></script>
    <script type="text/javascript" src="/static/js/showMapFn.js"></script>
    <style type="text/css">
        .infowindow .window .top .right .user .content{
            font-size: 10px;
        }
        .infowindow .window .top .right .user .titlebar .title{
            font-size: 10px;
            font-weight:bold;
        }
    </style>
    <script type="text/javascript" >
    $(function(){
        $.showMapObj.init({
            dataMapURL     :'{{ mapDataURL }}',//地图信息
            dataURL        :'{{ dataURL }}',//单元数据
            dataPageURL    :'{{ dataPageURL }}',//分页
            dataSubmitURL  :'{{ dataSubmitURL }}',//提交地图信息
            dataStructure  :'{{ dataStructure }}'//显示的结构
        });
        $("#rangeStoreCell").bind('click',function(){
            var name = $('#name').val();       //'store'
            drowPolygon(name);
        });
    });
    function isExistInArr(_array, _element){  
        if(!_array || !_element) return false;  
        if(!_array.length){  
            return (_array == _element);  
        }  
        for(var i=0; i<_array.length; i++){  
            if(_element == _array[i]) return true;  
        }  
        return false;  
    }
    /*去除数组中重复元素的方法*/  
    function distinct(_array){  
        if(!_array || !_array.length) return _array;  
        var newArray = new Array();  
        for(var i=0; i<_array.length; i++){  
            var oEl = _array[i];  
            if(!oEl || this.isExistInArr(newArray, oEl)) continue;  
            newArray[newArray.length] = oEl;  
        }  
        return newArray;  
    }
    function pageClick(el,command){    //this chang  page     点击的时候
        el = $(el);
        var _parent = el.parent()
        var _curPage = parseInt( _parent.attr('curPage') );
        var _maxPage = parseInt( _parent.attr('maxPage') );
        var _resultPage;
        if(command == 'page'){
            _resultPage = el.attr('data');
        }
        if(command == 'change'){
            var _number = parseInt( el.attr('data') );
            var _resultPage = _curPage + _number ;
            if( _resultPage <= 0 ){
                _resultPage = 1 ;
            }
            if( _resultPage > _maxPage  ){
                _resultPage = _maxPage ;
            }
        }
        var _dataURL = $.showMapObj.options.dataPageURL + _resultPage +'/'; ///company/store/size/10/page/
        var _options = {
            url:_dataURL,
            type:'GET',
            async:true,
            dataType:'json',
            beforeSend:function(){
                $('.showLoad').showLoading();   //闪动
            },
            success:function(_data){
                var _dataContent = $( el.parent().parent().find('table .dataList')[0] );
                    _dataContent.html('');
                var ids = $('#ids').val();
                    ids = ids.split(',');
                for(var i = 0; i < _data.length; i++){
                    var checked = '';
                    if( isExistInArr( ids, (_data[i].id+'') ) ){
                        checked = 'checked';
                    }
                    var _tr = '<tr>';
                        _tr+= '<td><input type="checkbox" '+ checked +' onClick="_checkEvent(this);" code='+_data[i]['id']+'></td>';
                        for(var j=0; j< $.showMapObj.data.dataStructure.length; j++){
                            var key = $.showMapObj.data.dataStructure[j];
                            _tr+= '<td>'+ _data[i][key] +'</td>';
                        }
                        _tr+= '</tr>';
                    _dataContent.append(_tr);
                }

                _parent.attr('curPage' , _resultPage );

               $('.showLoad').hideLoading();
            },
            error:function(){
               $('.showLoad').hideLoading();
            }
        }

        $.ajax(_options);     //获取数据  展示
    }

    function _checkEvent(el){
        var flag = el.checked;

        var id = el.getAttribute('code');
        var ids = document.getElementById('ids').value;

        if(ids){
            ids = ids.split(',');
        }else{
            ids = [];
        }

        if(flag){
            if(isExistInArr(ids,id)){
                return;
            }

            ids.push(id);
        }else{
            var index = 0;
            
            for(var i=0; i<ids.length; i++){
                if( id === ids[i] ){
                    index = i;
                    break;
                }
            }

            ids.splice(index, 1)
        }

        ids = distinct(ids).join(',');

        document.getElementById('ids').value = ids;               //id 赋值
    }

    function submitRange(){ //提交
        //这里要做一个判断，如果没有画就不提交
        $('input[type=checkbox]').iCheck('destroy');
        var title="选择该区域{{ title }}单元";
        var type="";
        var _dataContent = $('.dataList');
        _dataContent.html('');

        _data = $.showMapObj.data.table;

        if(!_data) return false;
        //追加数据
        for(var i = 0; i < _data.length; i++){
            var _tr = '<tr>';
            _tr+= '<td><input type="checkbox" onClick="_checkEvent(this);" code='+_data[i]['id']+'></td>';

            for(var j=0; j< $.showMapObj.data.dataStructure.length; j++){
                var key = $.showMapObj.data.dataStructure[j];
                _tr+= '<td>'+ _data[i][key] +'</td>';
            }

            _tr+= '</tr>';
            _dataContent.append(_tr);
        }
        var content=$("#storeCellCommitDiv").html();

        toSubmitModal(title,content,type);
    }

    </script>

<div class="modal fade in" id="rangeModal" aria-hidden="false">
    <div class="modal-dialog showLoad">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 class="modal-title" id="title"></h3>
            </div>
            <div class="modal-body" id="content">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-info" data-dismiss="modal" id="submit">提交</button>
                <button type="button" class="btn btn-default" data-dismiss="modal"  onclick="undoManager.undo();">撤销编辑</button>
            </div>
        </div>
    </div>
</div>

{% endblock %}